<template>
    <van-uploader
      :after-read="afterRead"
      v-model="fileList"
      @delete="onDelete"
    />
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue';
  import axios from 'axios';
  import { http } from '../utils/request'
  
  // 接收外部传入的属性
  const props = defineProps({
    modalCode: {
      type: String,
      required: true
    },
    busiKey: {
      type: String,
      required: true
    },
    // 可自定义上传接口地址
    uploadUrl: {
      type: String,
      default: 'your_upload_api_url'
    }
  });
  
  // 定义上传所需的头部信息和数据
  const headers = ref({
    // 可以根据实际需求添加更多头部信息
    'Content-Type': 'multipart/form-data'
  });
  

  const fileList = ref([]);
  
  // 定义事件处理方法
  const emit = defineEmits(['change', 'success', 'fail', 'delete']);
  
  // 上传文件成功后的处理方法
  const afterRead = (file) => {
    // 可以根据需要进行文件处理，比如上传到服务器等
    // 这里只是简单地将文件信息打印到控制台
    console.log('Uploaded file:', file);
    // 上传文件到服务器
    const formData = new FormData()
    formData.append('file', file.file)
    axios.post('/api/file/upload?modelCode=' + props.modalCode + '&busiKey=' + props.busiKey, formData).then(res => {
      console.log(res)
      // 上传成功后，将文件信息传递给父组件
      emit('change', file);
    }).catch(err => {
      console.log(err)
      // 上传失败后，将错误信息传递给父组件
      emit('fail', err);
    })
    emit('success', file);
  };

  // 查询存在的文件
  const getFile = async () => {
    const list = await http.post(`/file/queryFile?modelCode=${props.modalCode}&busiKey=${props.busiKey}`)
    fileList.value = list.map(v => {
        return {
            ...v,
            url: v.filePath,
            isImage: true
        }
    })
  }

  const onDelete = (file) => {
    // 可以根据需要进行文件删除处理，比如从服务器删除等
    // 这里只是简单地将文件信息打印到控制台
    console.log('Deleted file:', file);
    // 删除文件
    http.post(`/file/removeFile?fileId=${file.id}`)
  }

  watch(() => props.busiKey, () => {
    getFile()
  }, {
    immediate: true
  })

  onMounted(() => {
    getFile()
  })
  </script>
  
  <style scoped>
  /* 可以根据需要添加样式 */
  </style>